<template>
  <div class="more-track">
    <div class="table-container">
      <div class="search-key">
          <el-input v-model="searchKey" @keypress.enter.native="getDoneList({pageNumber: 1, pageSize: pageController.pageSize})"
            placeholder="支持系统模块、已办事项、制单人、时间全字段模糊搜索">
              <el-button slot="append" icon="el-icon-search" @click="getDoneList({pageNumber: 1, pageSize: pageController.pageSize})"></el-button>
          </el-input>
          
      </div>
      <el-table
              ref="doneTable"
              :data="doneList"
              stripe
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="headStyle"
              :cell-style="tableStyle">
        <el-table-column
                prop="asingn[0]"
                label="系统模块"
                width="150"
                align="center"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="已办事项">
          <template slot-scope="scope">
            <div class="todo-item">
              <a href="#" @click="openMenuFunction(scope.row.url, convertTitle(scope.row.asingn[1]||'标题'), scope.row)">{{scope.row.asingn[1]||'标题'}}</a>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
                prop="name"
                label="当前环节"
                width="250"
                align="center"
                show-overflow-tooltip>
        </el-table-column> -->
        <el-table-column
                label="制单人"
                width="250"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
              {{scope.row.asingn[2]||''}}
          </template>
        </el-table-column>
        <el-table-column
                label="时间"
                width="250"
                align="center"
                show-overflow-tooltip>
                 <template slot-scope="scope">
              {{scope.row.asingn[3]||''}}
          </template>
        </el-table-column>
      </el-table>

      <custom-pagination
              :totalPages="pageController.totalPage"
              :totalNum="pageController.totalNumber"
              :currentPage="pageController.pageNumber"
              :perPageSuggestion="pageSizeSuggestion"
              :defaultPageSize="pageController.pageSize"
              @perPageChange="handlePerPageChange"
              @toFirstPage="toFirstPage"
              @toLastPage="toLastPage"
              @toNextPage="toNextPage"
              @toEndPage="toEndPage"
              @toTargetPage="toTargetPage"
      >
      </custom-pagination>
    </div>
  </div>
</template>

<script>
import CustomPagination from '../componentStore/common/CustomPagination';
import appUtil from '~/assets/utils/appUtil';
let Base64 = require('js-base64').Base64;
export default {
    name: 'more-todo',
    components: {
        CustomPagination,
    },
    data() {
        return {
            doneList: [],
            searchKey: '',

            pageSizeSuggestion: [12, 15, 20, 25, 30],
            pageController: {
                pageNumber: 1,
                pageToJump: 1,
                pageSize: 10,
                totalPage: 1,
                totalNumber: 0,
            },

            headStyle: {
                'font-size': '17px',
                'background-color': '#F5F8FC',
                'font-weight': 'bold'
            },
            tableStyle: {
                'cursor': 'pointer',
                'font-size': '15px',
            },
        };
    },
    computed: {
        
    },
    created(){
        this.getDoneList(this.pageController);
    },
    methods: {
        getDoneList(target){
            let data = {
                userCode:appUtil.getSes('userCode'),
                roleId:Base64.decode(JSON.parse(localStorage.getItem('commonData')).svRoleId),
                name:this.searchKey, // 模糊查询
                page:target.pageNumber,
                rows:target.pageSize,
            };
            // name是可以根据任务内容，单据id和单据类型进行模糊匹配
            this.$axios.get('/fbpm-process/center/task/done',{params:data})
                .then(response => {
                    let param = {};
                    param= response.data.data.rows;
                    this.doneNum = response.data.data.records;
                    for(let i=0;i<param.length;i++){
                        param[i].asingn=param[i].title.split('###');
                    }
                    this.doneList = param;
                    console.log(param);
                    this.pageController.totalPage = response.data.data.total;
                    this.pageController.totalNumber = response.data.data.records;
                });
        },
        openMenuFunction(url,title, payload){
            if(url && title){
                if(payload) {
                    this.convertAndOpen(url, title, payload);
                } else {
                    window.parent.addTabToParent(title,url);
                }
            } else {
                this.$message.error('链接或标题为空，无法打开');
            }
        },
        convertAndOpen(url, title, payload) {
            let interfaceType = appUtil.getParamFromUrl(url, 'interfaceType');
            let commonData  = localStorage.getItem('commonData');
            if(interfaceType === '1') {
                try {
                    let urlWithoutParams = url.split('?')[0];
                    this.$axios.post(urlWithoutParams, {appType: 'pc', businessKey: payload.businessKey, urlType: 'done'}).then(res => {
                        url = res.data.data.url;
                        url += url.indexOf('?') > -1 ? '&' : '?';
                        url += 'urlType=' + (payload.urlType || '') +
                '&appCode=' + (payload.appCode || '') +
                '&procInstId=' + (payload.procInstId || '') +
                '&procDefId=' + (payload.procDefId || '') +
                '&businessKey=' + (payload.businessKey || '') +
                '&nodeId=' + (payload.nodeId || '') +
                '&taskId=' + (payload.taskId || '') +
                '&menuId=' + (payload.menuId || '') +
                '&roleId=' + (Base64.decode(JSON.parse(commonData).svRoleId) || '') +
                '&roleCode=' + (Base64.decode(JSON.parse(commonData).svRoleCode) || '');
                        window.parent.addTabToParent(title,url);
                        // bus.$emit('openMenu', url, title);
                    });
                } catch(e) {
                    console.error(e);
                }
            } else {
                let temp = url.split('?');
                url = temp[0] +  '?urlType=' + (payload.urlType || '') +
            '&appCode=' + (payload.appCode || '') +
            '&procInstId=' + (payload.procInstId || '') +
            '&procDefId=' + (payload.procDefId || '') +
            '&businessKey=' + (payload.businessKey || '') +
            '&nodeId=' + (payload.nodeId || '') +
            '&taskId=' + (payload.taskId || '') +
            '&menuId=' + (payload.menuId || '') +
            '&roleId=' + (Base64.decode(JSON.parse(commonData).svRoleId) || '') +
            '&roleCode=' + (Base64.decode(JSON.parse(commonData).svRoleCode) || '')+
            '&done=true';
                if(temp[1]) {
                    url += ('&' + temp[1]);
                }
                window.parent.addTabToParent(title,url);
                // bus.$emit('openMenu', url, title);
            }
        },
        handlePerPageChange(pageSize){
        //如果切换每页数量后不存在当前页，则自动加载最后一页数据
            let target = {
                pageNumber: 1,
                pageSize: pageSize
            };
            //重新算出当前页第一条数据的序号，以便重新加载表格
            //this.pageController.pageNumber = (this.pageController.currentPage - 1) * pageSize;
            this.getDoneList(target);
        },
        toFirstPage(){
            this.toTargetPage(1);
        },
        toLastPage(){
            let target = this.pageController;
            if(target.pageNumber > 1){
                this.toTargetPage(target.pageNumber - 1);
            }
        },
        toNextPage(){
            let target = this.pageController;
            if(target.pageNumber < target.totalPage){
                this.toTargetPage(target.pageNumber + 1);
            }
        },
        toEndPage(){
            this.toTargetPage(this.pageController.totalPage);
        },
        //跳转到对应页面，forceUpdate为强制刷新，传入该参数后即使页码不变也要重新请求页面数据
        toTargetPage( pageNumber, forceUpdate ){
            pageNumber = parseInt(pageNumber);
            let target = this.pageController;

            if(!(pageNumber > 0 && pageNumber <= this.pageController.totalPage)){
                this.$message.warning('页码无效');
                return;
            }
            if(forceUpdate || this.pageController.pageNumber !== pageNumber){
                target.pageNumber= pageNumber;
                this.getDoneList(target);
            }
        },
        removeItem(item){
            this.$axios.delete('/ptp-msg/apis/track/'+item.id).then(() => {
                let index = this.trackList.indexOf(item);
                if(index > -1){
                    this.trackList.splice(index,1);
                    this.$message.success('取消跟踪成功');
                    this.getDoneList(this.pageController);
                }
            });
        },
        convertTitle (title) {
            return title.indexOf('-') > -1 ? '单据详情' : title;
        }
    }
    
};
</script>

<style scoped>
  .more-track{
    width: 100%;
    text-align: center;
    background-color: white;
    min-height: 99%;
  }

  .table-container{
    width: 80%;
    margin: auto;
    padding: 30px;
  }
  .search-key {
      width: 500px;
      float: right;
      margin-bottom: 10px;
  }

</style>